<template>
    <div class="user">

        <div class="table">
            <el-table
            stripe
            :data="list"
            style="width: 100%">
                <el-table-column
                    prop="userId"
                    width="80px"
                    label="ID">
                </el-table-column>
                <el-table-column
                    label="头像">
                    <template slot-scope="scope">
                        <div>
                            <el-image 
                                style="width: 100px; height: 100px"
                                :src="$ip + scope.row.userImage"
                                lazy
                                :preview-src-list="[$ip + scope.row.userImage]">
                            </el-image>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="mail"
                    label="邮箱">
                </el-table-column>

                <el-table-column
                    prop="userName"
                    label="名称">
                </el-table-column>

                <el-table-column
                    label="权限">
                    <template slot-scope="scope">
                        <el-tag
                        :type="roots[scope.row.root].tag"
                        disable-transitions>{{ roots[scope.row.root].title }}</el-tag>
                    </template>
                </el-table-column>

                <!-- <el-table-column
                    prop="remarks"
                    label="管理批注">
                </el-table-column> -->

                <el-table-column
                    label="创建时间">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        &nbsp;
                        <span>{{ dayjs(scope.row.createTime).format('YYYY/MM/DD HH:mm:ss') }}</span>
                    </template>
                </el-table-column>

                <el-table-column
                    width="530px"
                    label="操作">
                    <template slot-scope="scope">
                        <div>

                            <el-button
                            @click="$router.push('/userDetail?uid=' + scope.row.userId)">详情</el-button>

                            <el-button
                            :disabled="scope.row.root == 3"
                            :type="scope.row.status == 0 ? 'warning' : 'primary'"
                            @click="handleHide(scope.$index, scope.row)">
                                {{scope.row.status == 0 ? '禁用' : '启用'}}
                            </el-button>

                            <el-dropdown style="margin-left: 10px;" @command="setRoot"
                            trigger="click"
                            >
                                <el-button type="primary" :disabled="scope.row.root == 3">
                                    修改权限<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item 
                                    :command="{index, user : scope.row}"
                                    :disabled="index == 0 || scope.row.root == index" 
                                    v-for="(item, index) in roots" :key="index">{{ item.title }}</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            
                            <el-dropdown style="margin-left: 10px;"
                            trigger="click"
                            >
                                <el-button type="primary" :disabled="scope.row.root == 3">
                                    更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>删除</el-dropdown-item>
                                    <el-dropdown-item>发送邮件</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>

                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { getUserList, setUserRoot } from '@/api/user'
import { mapState } from 'vuex'
export default {
    name:"User",
    data(){
        return {
            list : [],
        }
    },
    computed : {
        ...mapState(['roots'])
    },
    created(){
        this.getList()
    },
    methods:{
        getList(){
            getUserList().then(res => {
                if(res.code == 200){
                    this.list = res.data.records
                }
            })
        },
        handleDetele(){},
        handleHide(){},
        setRoot({ index, user }){
            setUserRoot({
                root : index,
                userId : user.userId
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success('操作成功')
                    this.getList()
                }
            })
        }
    }
}
</script>